<template>
<div id="resource">

    <!-- 资源保存按钮 -->
    <Button type="primary" @click.native="resourceSave">保存资源</Button>
    <Divider />

    <!-- 资源树 -->
    <Row>
        <Col :md="24" :lg="10">
        <!-- <Tree :data="resource.resourceListSta" :render="renderContent"></Tree> -->
        <Tree :data="data1" :render="renderContent"></Tree>
        </Col>
    </Row>

    <!-- 编辑资源 -->
    <ResourceEdit></ResourceEdit>

</div>
</template>

<script>
import Vue from 'vue'
import {
    Row,
    Col,
    Tree,
    Button,
    Divider,
    Message
} from 'iview'
Vue.prototype.$Message = Message;
import {
    mapState,
    mapMutations,
    mapActions
} from 'vuex'
import ResourceEdit from '../../components/ResourceEdit' //编辑资源

export default {
    name: 'Resource',
    data() {
        return {
            data1: [{
                title: '默认根节点',
                expand: true,
                render: (h, {
                    root,
                    node,
                    data
                }) => {
                    return h('span', {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        }
                    }, [
                        h('span', [
                            h('Icon', {
                                class: 'ivu-icon ivu-icon-ios-photos',
                                style: {
                                    marginRight: '8px'
                                }
                            }),
                            h('span', data.title)
                        ]),
                        h('span', {
                            style: {
                                display: 'inline-block',
                                float: 'right',
                                marginRight: '10px'
                            }
                        }, [
                            h('Button', {
                                class: 'ivu-btn ivu-btn-primary',
                                style: {
                                    width: '155px',
                                    padding: 0,
                                    marginRight: '10px'
                                }
                            }, [
                                h('Icon', {
                                    class: 'ivu-icon ivu-icon-md-add',
                                    style: {
                                        lineHeight: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            this.resourceAdd(data); //根节点新增
                                        }
                                    }
                                })
                            ])
                        ])
                    ]);
                },
                children: [{
                        title: 'child 1-1',
                        expand: true,
                        children: [{
                                title: 'leaf 1-1-1',
                                expand: true
                            },
                            {
                                title: 'leaf 1-1-2',
                                expand: true
                            }
                        ]
                    },
                    {
                        title: 'child 1-2',
                        expand: true,
                        children: [{
                                title: 'leaf 1-2-1',
                                expand: true
                            },
                            {
                                title: 'leaf 1-2-1',
                                expand: true
                            }
                        ]
                    }
                ]
            }]


        };
    },
    created() {
        let _self = this;
        let obj = {};
        this.$axios.post('/acl_resource/list', obj).then(res => {
            console.log('/acl_resource/list', res.data);
            _self.data1[0].children = res.data;
        })
    },
    mounted() {},
    computed: {},
    methods: {
        ...mapMutations([
            'resourceEditModalMut', //编辑资源模态框
            'resourceOneMut' //获取当前选中的资源
        ]),
        //树的操作
        renderContent(h, {
            root,
            node,
            data
        }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, [
                h('span', [
                    h('Icon', {
                        class: 'ivu-icon ivu-icon-ios-photos',
                        style: {
                            marginRight: '5px'
                        }
                    }),
                    h('span', data.title)
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '20px'
                    }
                }, [
                    h('Button', {
                        class: 'ivu-btn ivu-btn-primary',
                        style: {
                            width: '45px',
                            padding: 0,
                            marginRight: '10px'
                        }
                    }, [
                        h('Icon', {
                            class: 'ivu-icon ivu-icon-md-add',
                            style: {
                                width: '45px',
                                lineHeight: '30px'
                            },
                            on: {
                                click: () => {
                                    this.resourceAdd(data); //新增
                                }
                            }
                        })
                    ]),
                    h('Button', {
                        class: 'ivu-btn ivu-btn-primary',
                        style: {
                            width: '45px',
                            padding: 0,
                            marginRight: '10px'
                        }
                    }, [
                        h('Icon', {
                            class: 'ivu-icon ivu-icon-md-remove',
                            style: {
                                width: '45px',
                                lineHeight: '30px'
                            },
                            on: {
                                click: () => {
                                    this.resourceRemove(root, node, data); //删除
                                }
                            }
                        })
                    ]),
                    h('Button', {
                        class: 'ivu-btn ivu-btn-primary',
                        style: {
                            width: '45px',
                            padding: 0
                        }
                    }, [
                        h('Icon', {
                            class: 'ivu-icon ivu-icon-md-create',
                            style: {
                                width: '45px',
                                lineHeight: '30px'
                            },
                            on: {
                                click: () => {
                                    this.resourceEdit(root, node, data); //编辑
                                }
                            }
                        })
                    ])
                ])
            ]);
        },
        //新增
        resourceAdd(data) {
            const children = data.children || [];
            children.push({
                title: '新增节点',
                expand: true
            });
            this.$set(data, 'children', children);
        },
        //删除
        resourceRemove(root, node, data) {
            const parentKey = root.find(el => el === node).parent;
            const parent = root.find(el => el.nodeKey === parentKey).node;
            const index = parent.children.indexOf(data);
            parent.children.splice(index, 1);
        },
        //编辑
        resourceEdit(root, node, data) {
            this.resourceEditModalMut({
                state: true
            }); //编辑资源模态框
            this.resourceOneMut({
                state: data
            }) //获取当前选中的资源
        },
        //保存
        resourceSave() {
            let _self = this;
            console.log('data', this.data1[0].children);
            let obj = {
                "list": this.data1[0].children
            };
            this.$axios.post('/acl_resource/resourceSave', obj).then(res => {
                console.log('返回值：', res.data);
                if (res.data) {
                    _self.$Message.success('保存成功');
                } else {
                    _self.$Message.error('保存失败');
                }
            });
        }
    },
    components: {
        Row,
        Col,
        Tree,
        Button,
        Divider,
        Message,
        ResourceEdit
    }
}
</script>
